<template>
  <view class="content" id="content" ref="content">
    <u-toast ref="uToast" />

    <view class="title">
      <image
        src="../../static/jiantous.png"
        class="return"
        style="
          width: 32rpx;
          height: 32rpx;
          margin-left: 30rpx;
          z-index: 999;
          position: absolute;
        "
        @click="returns()"
      ></image>
    </view>

    <view>
      <image
        src="../../static/lighting.png"
        style="
          position: absolute;
          left: 50%;
          transform: translate(-50%, -10%);
          z-index: 2;
        "
      ></image>
    </view>

    <view
      id="threeView"
      style="
        z-index: 99;
        position: relative;
        display: flex;
        justify-content: center;
      "
    ></view>

    <view v-if="productDetail_product_snap">
      <view class="goodsImage" v-if="filetype == 1">
        <image
          class="goodsImage_product"
          :src="productDetail_product_snap.resources_url"
        ></image>
      </view>
      <view :threeall="threeall" :change:threeall="three.all"></view>

      <view
        v-if="filetype == 3"
        style="margin: 0 auto 50px; display: flex; justify-content: center"
        class="videocss"
      >
        <video
          :src="productDetail_product_snap.resources_url"
          :autoplay="true"
          :loop="true"
          :show-center-play-btn="false"
          object-fi="cover"
          class="video"
        ></video>
      </view>

      <view class="base" v-if="filetype != 3">
        <view class="base_enlarge" @click="tomodel_detail" v-if="filetype == 2">
          <image class="base_image_enlarge" src="../../static/see.png"></image>
        </view>

        <image class="base_image" src="../../static/detail_base.png"></image>

        <view class="oliveBranch">
          <image
            class="oliveBranch_image1"
            src="../../static/oliveBranch1.png"
          ></image>

          <view class="oliveBranch_center">
            <view class="oliveBranch_center_first">{{
              productDetail_product_snap.name
            }}</view>

            <view class="oliveBranch_center_CollectionCode">
              <image
                class="oliveBranch_center_CollectionIcon"
                src="../../static/collect_icon.png"
              ></image>

              <view class="oliveBranch_center_no">{{ productDetail.no }}</view>
            </view>
          </view>

          <image
            class="oliveBranch_image2"
            src="../../static/oliveBranch2.png"
          ></image>
        </view>
      </view>

      <!-- 展示视频时 -->
      <view class="oliveBranch oliveBranch3" v-if="filetype == 3">
        <image
          class="oliveBranch_image1"
          src="../../static/oliveBranch1.png"
        ></image>

        <view class="oliveBranch_center">
          <view class="oliveBranch_center_first">{{
            productDetail_product_snap.name
          }}</view>

          <view class="oliveBranch_center_CollectionCode">
            <image
              class="oliveBranch_center_CollectionIcon"
              src="../../static/collect_icon.png"
            ></image>

            <text>{{ productDetail.no }}</text>
          </view>
        </view>

        <image
          class="oliveBranch_image2"
          src="../../static/oliveBranch2.png"
        ></image>
      </view>

      <view
        class="collectDetail"
        :class="filetype == 3 ? 'collectDetail_video' : ''"
      >
        <view class="collectDetail_rowTitle">收藏者</view>
        <view class="collectDetail_rowDetail">{{
          productDetail.user.account
        }}</view>

        <view class="collectDetail_rowTitle">藏品哈希值</view>
        <view class="collectDetail_row4">{{ tx_hash }}</view>

        <view class="collectDetail_rowTitle">创作者</view>
        <view class="collectDetail_rowDetail">{{
          productDetail_product_snap.creator_name
        }}</view>

        <view class="collectDetail_rowTitle">生成时间</view>
        <view class="collectDetail_rowDetail">{{
          productDetail.created_at
        }}</view>
      </view>

      <view class="collection_detail">
        <view class="collection_detail_text">
          <text>藏品介绍</text>
        </view>
        <uparse
          :html="productDetail_product_snap.introduce"
          class="uparse"
        ></uparse>
        <view class="Issuer">
          <text>发行方</text>
          <text>{{ productDetail.product.issuer.nickname }}</text>
        </view>
      </view>

      <view
        v-if="productDetail.product && productDetail.product.can_exchange == 1"
        class="exchangeButton"
        @click="handleExchange"
        >可兑换</view
      >

      <view class="bottom">
        <view class="bottom_item" @click="toGiveAway(0)">
          <image
            class="bottom_item_icon"
            src="../../static/xuanYao.png"
          ></image>

          <view class="bottom_item_text">炫耀</view>
        </view>

        <view class="bottom_item" @click="toGiveAway(1)">
          <image
            class="bottom_item_icon"
            src="../../static/zhuangZen.png"
          ></image>

          <view class="bottom_item_text">转赠</view>
        </view>

        <view class="bottom_item" @click="toGiveAway(3)">
          <image class="bottom_item_icon" src="../../static/resell.png"></image>
          <view class="bottom_item_text">转卖</view>
        </view>

        <view class="bottom_item" @click="toGiveAway(2)">
          <image
            class="bottom_item_icon"
            src="../../static/zhengShu.png"
          ></image>

          <view class="bottom_item_text">证书</view>
        </view>
      </view>
    </view>

    <view
      v-if="!productDetail && is_done"
      style="
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(calc(50% - 120rpx));
      "
    >
      <text style="color: aliceblue">暂无数据</text>
    </view>
    <u-popup v-model="showstate" mode="bottom" height="350rpx">
      <view class="showpopup">
        <view
          class="titlepopup"
          @click="$u.debounce(preservationimg, 1000, true)"
        >
          <image
            style="width: 90rpx; height: 90rpx"
            src="../../static/preservation.png"
          ></image>
          <view style="margin-top: 30rpx">保存本地</view>
        </view>

        <view @click="sharewx" class="titlepopup">
          <image
            style="width: 90rpx; height: 90rpx"
            src="../../static/share.png"
          ></image>
          <view style="margin-top: 30rpx">分享到微信</view>
        </view>
      </view>
    </u-popup>

    <u-popup
      v-model="showimgstate"
      mode="center"
      height="671px"
      width="325px"
      border-radius="32"
    >
      <canvas
        id="canvas"
        canvas-id="canvas"
        class="canvas"
        :class="!dataImageh5 ? 'canvas' : 'canvasnew'"
        @click="showimgstate = false"
      ></canvas>
      <!-- <img src="" id="test" style="width: 750rpx;height: 1300rpx;" alt=""> -->
      <img
        :src="dataImage"
        mode=""
        style="width: 325px; height: 671px"
        v-if="dataImageh5"
        @click="showimgstate = false"
      />
    </u-popup>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
import { isLogin } from "@/utils/auth.js";
import { getSharePoster } from "../../components/QS-SharePoster/QS-SharePoster.js";

import html2canvas from "html2canvas";
export default {
  data() {
    return {
      user_product_id: "",
      is_cert: "",

      productDetail: null,
      productDetail_product_snap: null,
      tx_hash: "",

      is_done: false,
      filetype: 1,
      threeall: {
        width: "",
        productDetail_url: "",
        is_picture: false,
        picture_cover: "",
        is_shanghu: uni.getStorageSync("unique_code"),
        shanghu_bg: "",
      },
      showstate: false, //分享
      showimgstate: false, //画布弹框
      dataImage: null,
      dataImageh5: false,
    };
  },
  onLoad(options) {
    this.user_product_id = options.user_product_id || "";
    this.is_cert = options.is_cert || "";

    this.getUserProductDetail();
  },
  onShow() {
    this.getImage();
  },
  methods: {
    async getImage() {
      if (!this.threeall.is_shanghu) {
        return;
      }
      let res = await api.getImage({
        method: "get",
        query: {},
      });

      if (res.code === 0) {
        this.threeall.shanghu_bg = res.data.url;
      } else {
        tip.defaults(res.msg);
      }
    },
    sharewx() {
      // uni.share({
      //     provider: 'weixin',
      //     scene: 'WXSceneSession',
      //     type: 2,
      //     imageUrl: this.dataImage,
      //     success: function (res) {
      //         console.log('success:' + JSON.stringify(res))
      //     },
      //     fail: function (err) {
      //         console.log(this.dataImage,'this.dataImagethis.dataImagethis.dataImage');
      //         console.log('fail:' + JSON.stringify(err))
      //     },
      // })
      uni.shareWithSystem({
        summary: "",
        imageUrl: this.dataImage,
        success() {
          // 分享完成，请注意此时不一定是成功分享
        },
        fail() {
          // 分享失败
        },
      });
    },
    tomodel_detail() {
      let threemodel = JSON.stringify(this.threeall);
      if (this.threeall.is_picture && this.productDetail_product_snap) {
        uni.navigateTo({
          url: `../../pages/model_detail/model_detail?threeall=${threemodel}&picture=${this.productDetail_product_snap.cover}`,
        });
      } else {
        uni.navigateTo({
          url: `../../pages/model_detail/model_detail?threeall=${threemodel}`,
        });
      }
    },
    returns() {
      console.log(11);
      let canNavBack = getCurrentPages();
      if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        history.back();
      }
    },
    async getUserProductDetail() {
      let res = await api.userProductDetail({
        method: "get",
        query: {
          user_product_id: this.user_product_id,
          is_cert: this.is_cert,
        },
      });
      if (res.code === 0) {
        this.is_done = true;

        if (res.data) {
          this.productDetail = res.data;
          this.productDetail_product_snap = JSON.parse(res.data.product_snap);
          this.tx_hash = res.data.tx_hash;

          if (
            ["png", "jpg", "jpeg", "gif"].indexOf(
              this.productDetail_product_snap.resources_url.split(".").pop()
            ) != -1
          ) {
            this.threeall.picture_cover =
              this.productDetail_product_snap.resources_url;
            this.productDetail_product_snap.resources_url =
              "https://img.metatmt.com/model/template.gltf";
            this.threeall.is_picture = true;
          }

          if (
            this.productDetail_product_snap.resources_url.split(".").pop() ==
            "gltf"
          ) {
            this.filetype = 2;
            uni.getSystemInfo({
              success: (res) => {
                this.threeall.width = res.safeArea.width;
                this.threeall.productDetail_url =
                  this.productDetail_product_snap.resources_url;
              },
            });
          }
          // this.shareFc()

          let videoarr = ["mp4", "rmvb", "wmv", "avi", "mov", "flv"];
          videoarr.forEach((el) => {
            if (
              this.productDetail_product_snap.resources_url.split(".").pop() ==
              el
            ) {
              this.filetype = 3;
            }
          });
        }
      } else {
        tip.defaults(res.msg);
      }
    },

    toGiveAway(index) {
      if (index == 0) {
        this.shareFc();

        // #ifdef APP-PLUS
        this.showstate = true;
        // #endif

        // #ifdef H5
        this.dataImageh5 = true;
        // #endif

        this.showimgstate = true;
        //  this.$refs.uToast.show({
        //  	title: '敬请期待!',
        //  })
        return;
      }
      if (index == 2) {
        uni.navigateTo({
          url: `../../pages/certificate/certificate?token_id=${this.productDetail.token_id}&&user_product_id=${this.user_product_id}`,
        });
        return;
      }

      let productDetail = JSON.stringify(this.productDetail);
      uni.setStorageSync("productDetail", productDetail);

      if (index == 3) {
        // uni.navigateTo({
        //   url: `../../pages/online/online?user_product_id=${this.user_product_id}`,
        // });

        uni.navigateTo({
          url: `../../pages/goods_detail/goods_detail?product_id=${
            this.productDetail.product.id
          }&entrust=${true}`,
        });
        return;
      }

      uni.navigateTo({
        url: `../../pages/give_away/give_away`,
      });
    },
    async shareFc(img_url) {
      let _this = this;
      let name = "创作者 : " + _this.productDetail_product_snap.creator_name;
      let snupname = _this.productDetail_product_snap.name;
      if (snupname.length > 10) {
        snupname = _this.productDetail_product_snap.name.substring(0, 10);
      }

      let htt = _this.productDetail_product_snap.cover.substring(0, 5);
      if (htt == "http:") {
        _this.productDetail_product_snap.cover =
          "https" + _this.productDetail_product_snap.cover.substring(4);
      }

      try {
        const d = await getSharePoster({
          _this: _this, //若在组件中使用 必传
          canvasType: "2d",
          type: "testShareType",
          formData: {
            //访问接口获取背景图携带自定义数据
          },

          posterCanvasId: "canvas", //canvasId

          delayTimeScale: 20, //延时系数
          background: {
            height: 10,
            width: 10,
          },
          setCanvasWH({ bgObj }) {
            _this.poster = bgObj;
          },
          drawArray({ bgObj, type, bgScale, setBgObj, getBgObj }) {
            return [
              {
                type: "image",
                id: "productImage",
                url: "../../static/showoffbackground.png",
                dx: 0,
                dy: 0,
                serialNum: 0,
                infoCallBack(imageInfo) {
                  let width = 325;
                  let height = 671;
                  setBgObj({
                    width,
                    height,
                  });
                  return {
                    dWidth: width,
                    dHeight: height,
                    mode: "aspectFill",
                  };
                },
              },
              {
                type: "image",
                url: _this.productDetail_product_snap.cover,
                dx: 0,
                dy: 0,
                serialNum: 1,
                allInfoCallback({ drawArray }) {
                  const productImage = drawArray.find(
                    (item) => item.id === "productImage"
                  );
                  let width = 188;
                  let height = 188;
                  return {
                    dx: 68,
                    dy: 70,
                    correctLevel: 1,
                    dWidth: width,
                    dHeight: height,
                  };
                },
              },
              {
                type: "image",
                url: "../../static/photo_frame.png",
                dx: 0,
                dy: 0,
                serialNum: 1,
                allInfoCallback({ drawArray }) {
                  const productImage = drawArray.find(
                    (item) => item.id === "productImage"
                  );
                  let width = 200;
                  let height = 200;
                  return {
                    dx: 62,
                    dy: 65,
                    correctLevel: 1,
                    dWidth: width,
                    dHeight: height,
                  };
                },
              },
              {
                type: "text",
                text: snupname,
                color: "#FFFFFF",
                serialNum: 99,
                allInfoCallback({ drawArray }) {
                  return {
                    size: 18,
                    dx: 160,
                    dy: 395,
                    textAlign: "center",
                  };
                },
              },
              {
                type: "image",
                url: "../../static/oliveBranch1.png",
                dx: 0,
                dy: 0,
                serialNum: 1,
                allInfoCallback({ drawArray }) {
                  const productImage = drawArray.find(
                    (item) => item.id === "productImage"
                  );
                  let width = 50;
                  let height = 55;
                  return {
                    dx: 26,
                    dy: 380,
                    correctLevel: 1,
                    dWidth: width,
                    dHeight: height,
                  };
                },
              },
              {
                type: "image",
                url: "../../static/oliveBranch2.png",
                dx: 0,
                dy: 0,
                serialNum: 1,
                allInfoCallback({ drawArray }) {
                  const productImage = drawArray.find(
                    (item) => item.id === "productImage"
                  );
                  let width = 50;
                  let height = 55;
                  return {
                    dx: 248,
                    dy: 380,
                    correctLevel: 1,
                    dWidth: width,
                    dHeight: height,
                  };
                },
              },
              {
                type: "text",
                text: name,
                color: "#999999",
                serialNum: 99,
                allInfoCallback({ drawArray }) {
                  return {
                    size: 12,
                    dx: 160,
                    dy: 425,
                    textAlign: "center",
                  };
                },
              },
              {
                type: "text",
                text: "收藏者",
                color: "#999999",
                serialNum: 99,
                allInfoCallback({ drawArray }) {
                  return {
                    size: 12,
                    dx: 160,
                    dy: 480,
                    textAlign: "center",
                  };
                },
              },
              {
                type: "text",
                text: _this.productDetail.user.account,
                color: "#FFFFFF",
                serialNum: 99,
                allInfoCallback({ drawArray }) {
                  return {
                    size: 18,
                    dx: 160,
                    dy: 505,
                    textAlign: "center",
                  };
                },
              },
              {
                type: "text",
                text: "收藏编号",
                color: "#999999",
                serialNum: 99,
                allInfoCallback({ drawArray }) {
                  return {
                    size: 12,
                    dx: 160,
                    dy: 545,
                    textAlign: "center",
                  };
                },
              },

              {
                type: "text",
                text: _this.tx_hash,
                color: "#FFFFFF",
                serialNum: 99,
                allInfoCallback({ drawArray }) {
                  return {
                    size: 10,
                    dx: 160,
                    dy: 570,
                    textAlign: "center",
                  };
                },
              },
              {
                type: "text",
                text: "生成时间",
                color: "#999999",
                serialNum: 99,
                allInfoCallback({ drawArray }) {
                  return {
                    size: 12,
                    dx: 160,
                    dy: 605,
                    textAlign: "center",
                  };
                },
              },
              {
                type: "text",
                text: _this.productDetail.created_at,
                color: "#FFFFFF",
                serialNum: 99,
                allInfoCallback({ drawArray }) {
                  return {
                    size: 18,
                    dx: 160,
                    dy: 630,
                    textAlign: "center",
                  };
                },
              },
            ];
          },
        });

        let canvasres = await uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 600,
          height: 800,
          fileType: "jpg",
          canvasId: "canvas",
        });
        this.dataImage = canvasres[1].tempFilePath;
        console.log(this.dataImage, "======================================");
      } catch (e) {
        console.log(e, "============");
      }
    },

    async preservationimg() {
      // #ifdef APP-PLUS
      console.log("保存");
      // let res = await uni.canvasToTempFilePath({
      //     x: 0,
      //     y: 0,
      //     width: 600,
      //     height: 800,
      //     fileType: "jpg",
      //     canvasId: 'canvas',
      // })
      // console.log(res,'resresres');

      // let dataImage

      // if (res[1].errMsg === 'canvasToTempFilePath:ok') {
      //     dataImage = res[1].tempFilePath
      // } else {
      //     console.log(res, 'restres')
      //     return
      // }
      const saveRes = await uni.saveImageToPhotosAlbum({
        filePath: this.dataImage,
      });
      console.log(saveRes, "saveRessaveRessaveRes");

      tip.defaults("保存成功");
      console.log(this.dataImage, "this.dataImagethis.dataImagethis.dataImage");
      // #endif

      // #ifdef H5
      tip.defaults("请长按图片保存");
      // #endif
    },

    // async shareFcs() {
    //       const targetDom = document.querySelector('#content');

    //        new html2canvas(targetDom,{
    //          width:325,
    //          height:671,
    //          allowTaint:true,
    //          useCORS:true
    //        }).then(canvas=>{
    //         //  let oimg = new image()
    //         //  oimg = canvas.toDataURL()
    //          console.log(canvas.toDataURL,'canvas.toDataURL');

    //         //  document.getElementById("test").src= canvas.toDataURL();
    //          this.shareFc(canvas.toDataURL())
    //          this.showimgstate = true
    //        })

    // },

    async handleExchange() {
      const res = await api.exchangeFoodPoint({
        method: "post",
        query: {
          user_product_id: this.productDetail.id,
        },
      });
      if (res.code == 0) {
        tip.defaults("兑换成功");
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/mine/mine",
          });
        }, 1500);
      } else {
        tip.defaults(res.msg);
      }
    },
  },
};
</script>

<script module="three" lang="renderjs">
	const THREE = require('static/three/build/three.min.js')
	
	// OrbitControls 是对 Threejs 的三维场景进行缩放、平移、旋转操作
	import {
		OrbitControls
	} from 'static/three/examples/jsm/controls/OrbitControls.js'

	// 导入 glb 格式模型，若要导入其他格式模型，可尝试在 loaders 目录下加载其他文件
	import {
		GLTFLoader
	} from 'static/three/examples/jsm/loaders/GLTFLoader.js'
  import { RGBELoader } from 'static/three/examples/jsm/loaders/RGBELoader.js';

	var renderer;
	var scene;
	var camera;
	var controls;

	export default {
    props: {
      url: ""
    },
    onUnload(){
      renderer = null
      scene = null
      camera = null
      controls = null
    },
		mounted() {
			// this.initThree();//加载场景
			// this.leadModel(resources_url);//导入模型
			// this.createControls();//控制模型的缩放、平移、旋转操作
		},
		methods: {
      all(newValue, oldValue, ownerInstance, instance){
        console.log(newValue,'newValue');
        if(newValue.productDetail_url==""){
          return
        }
        console.log('all执行');
        this.initThree(newValue);//加载场景
		  	this.leadModel(newValue);//导入模型
		  	this.createControls();//控制模型的缩放、平移、旋转操作
      },
			createControls() {
				controls = new OrbitControls(camera, renderer.domElement)
        //滚轮是否可控制zoom
        controls.enableZoom = false;
        // controls.maxZoom
        // controls.minDistance = 3;
        // controls.maxDistance = 14;
        //是否自动旋转
        controls.autoRotate = true;
        controls.autoRotateSpeed = 2.0;

        //是否可平移，默认移动速度为7px
        controls.enablePan = false;

        //鼠标控制是否可用
        // controls.enabled = false;

        // //上下翻转的最大角度
        // controls.maxPolarAngle = 1.55;

        // //上下翻转的最小角度
        // controls.minPolarAngle = 1.55;
			},

			// 导入模型
			leadModel(newValue) {
				let loader = new GLTFLoader();
				// 导入本地或者服务器上的模型都可以
        
				loader.load(newValue.productDetail_url, function(gltf) {
					// loader.load('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb', function(gltf) {
            // http://img.yunshiar.com/models/niuniu.gltf

          // gltf.scene.scale.set(20, 20, 20);

          // gltf.scene.traverse( function ( child ) {
          //   if ( child.isMesh ) {
          //     child.material.emissive = new THREE.Color(0x414141);
          //     child.material.emissiveMap = child.material.map;
          //     child.material.emissiveIntensity = 0.1;
          //     child.material.metalness = 1;
          //     child.material.roughness = 1;
          //   }
          // });

          if(newValue.is_picture){
            {
              var geometry = new THREE.PlaneGeometry(44,44); //矩形平面
              var textureLoader = new THREE.TextureLoader();

              // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
              textureLoader.load(newValue.picture_cover, function(texture) {
                texture.encoding = THREE.sRGBEncoding;
                var material = new THREE.MeshLambertMaterial({
                  // color: 0x0000ff,
                  // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
                  map: texture,//设置颜色贴图属性值
                });
                var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
                // mesh.rotateY(0.176);

                // mesh.translateY(3.1);
                // mesh.translateZ(0.65);
                // mesh.translateX(-0.1);
                scene.add(mesh); //网格模型添加到场景中
              });
            }
            if(newValue.is_shanghu){
              var geometry1 = new THREE.PlaneGeometry(43,43); //矩形平面
              var textureLoader1 = new THREE.TextureLoader();

              // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
              textureLoader1.load(newValue.shanghu_bg, function(texture) {
                texture.encoding = THREE.sRGBEncoding;
                var material = new THREE.MeshLambertMaterial({
                  // color: 0x0000ff,
                  // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
                  map: texture,//设置颜色贴图属性值
                });
                var mesh = new THREE.Mesh(geometry1, material); //网格模型对象Mesh
                let planeMat = new THREE.MeshBasicMaterial;
                planeMat.side=THREE.DoubleSide;
                mesh.rotateY(3.14159274);

                // mesh.translateY(3.1);
                mesh.translateZ(2.5);
                // mesh.translateX(-0.1);
                // mesh.position.set(22,0,10)

                scene.add(mesh); //网格模型添加到场景中
              });
            }
          }

					scene.add(gltf.scene);

				});
			},

			initThree(newValue) {
				// 如果返回的不是未定义，说明threejs成功引入
				console.log('打印场景API', THREE.Scene);

				/* 创建场景对象Scene */
				scene = new THREE.Scene();

        // 环境灯
        // THREE.AmbientLight不需要指定位置，只需要指定颜色（十六进制）
        var ambientLight = new THREE.AmbientLight(0xffffff, 0.3)
        scene.add(ambientLight)

        // 主光
        const mainlLight = new THREE.DirectionalLight(0xffffff,  0.5)
        mainlLight.position.set(0, 0, 25);
        scene.add(mainlLight);

        // 背光
        const backlLight = new THREE.DirectionalLight(0xffffff, 0.5)
        backlLight.position.set(0, 0, -25);
        scene.add(backlLight);

        // // 底光
        // const bottomlLight = new THREE.DirectionalLight(0xffffff, 0.1)
        // bottomlLight.position.set(0, -50, 25);
        // scene.add(bottomlLight);

				/*
				    相机设置
				 */
				// var width = window.innerWidth; // 窗口宽度
				// var height = window.innerHeight; // 高度
				var width = newValue.width; // 窗口宽度
				var height = newValue.width; // 高度
				var k = width / height; // 窗口宽高比
				var s = 1000; // 三维场景显示范围控制系数，系数越大，显示的范围越大
				// 创建相机对象（正射投影）
				camera = new THREE.PerspectiveCamera(45, k, 1, 1000);
        if(newValue.is_picture){
          camera.position.set(0, 0, 100); //设置相机的摆放位置
        }else{
          camera.position.set(0, 0, 5); //设置相机的摆放位置
        }
				// camera.lookAt(new THREE.Vector3(0, 0, 0)); // 控制相机的焦点(镜头)位置，决定相机的朝向（取值为3维坐标对象-THREE.Vector3(x,y,z)）

				/*
				    创建渲染器对象
				 */
				renderer = new THREE.WebGLRenderer({
					antialias: true,   //抗锯齿
					alpha: true //设置透明，为true时，背景颜色需要注释掉
				});

        renderer.toneMapping = THREE.NoToneMapping;
        renderer.textureEncoding = THREE.sRGBEncoding;
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.setPixelRatio(window.devicePixelRatio); //开启HiDPI
        renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.setSize(width, height); // 设置渲染区域尺寸
				// renderer.setClearColor(0XECF1F3, 1); // 设置背景颜色

        // 环境贴图HDR
        new RGBELoader().load('https://img.metatmt.com/model/venice_sunset_1k.hdr', (texture) => {
          const pmremGenerator = new THREE.PMREMGenerator(renderer);
          const envMap = pmremGenerator.fromEquirectangular(texture).texture;
          pmremGenerator.dispose();
          scene.environment = envMap;
          // scene.background = envMap
        });

				const element = document.getElementById('threeView')
				element.appendChild(renderer.domElement); // body元素中插入canvas对象

        // var geometry = new THREE.PlaneGeometry(8.7,8.7); //矩形平面
        // var textureLoader = new THREE.TextureLoader();

        // // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
        // textureLoader.load(this.productDetail.resources_url, function(texture) {
        //   var material = new THREE.MeshLambertMaterial({
        //     // color: 0x0000ff,
        //     // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
        //     map: texture,//设置颜色贴图属性值
        //   });
        //   var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        //   // mesh.rotateY(0.176);

        //   // mesh.translateY(3.1);
        //   // mesh.translateZ(0.65);
        //   // mesh.translateX(-0.1);
        //   scene.add(mesh); //网格模型添加到场景中
        // });

        
        // var geometry = new THREE.PlaneGeometry(8.7,8.7); //矩形平面
        // var material = new THREE.MeshLambertMaterial({
        //   color: 0x000000, //三角面颜色
        //   transparent: true,  
        //   opacity : 0.1      
        // }); //材质对象
        // var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        //  scene.add(mesh); //网格模型添加到场景中

				// 执行渲染操作，指定场景，相机作为参数
				renderer.render(scene, camera);
        //  console.log(animationstatr,'this.animationstatr');
				this.render();
			},

			// 动画
			render() {
        if (!scene) {
          return
        }
        scene.rotateY(0.006);//每次绕y轴旋转0.01弧度
        // scene.rotateZ(0.01);//每次绕Z轴旋转0.01弧度
        // scene.rotateX(0.01);//每次绕X轴旋转0.01弧度

        requestAnimationFrame(() => {
          this.render();
        });

        renderer.render(scene, camera); //执行渲染操作
			},

		}
	}
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 30rpx 0 200rpx 0;
  background: $bg-color1;

  min-height: 100vh;
}
.title {
  position: absolute;
  top: 86rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  .return {
  }
}
.goodsImage {
  // margin: 0 187rpx;
  margin: 150rpx auto 90rpx;
  width: 316rpx;
  height: 316rpx;
  border-radius: 32rpx;
  border: 2rpx solid #dfdfdf;
  &_product {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // margin: 50%;
    // transform: translate(-50%, -50%);
    border-radius: 32rpx;
    width: 294rpx;
    height: 294rpx;
  }
}
.base {
  position: relative;
  margin: -60rpx 40rpx 0 40rpx;
  .base_enlarge {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    color: #ffffff;
    transform: translate(-50%, -10%);
    z-index: 999;
    border-radius: 45px;
    padding: 10rpx;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.4);
    .base_image_enlarge {
      margin: auto;
      width: 45rpx;
      height: 45rpx;
    }
  }

  &_image {
    width: 670rpx;
    height: 360rpx;
  }
}
.oliveBranch {
  position: absolute;
  top: 140rpx;
  left: 30rpx;
  right: 30rpx;

  margin-top: 6rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &_image1 {
    width: 100rpx;
    height: 110rpx;
  }
  &_image2 {
    width: 100rpx;
    height: 110rpx;
  }
  &_center {
    text-align: center;
    &_first {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;
      text-align: center;

      max-width: 500rpx;
      overflow: hidden;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    &_second {
      display: flex;
      align-items: center;

      margin: 20rpx auto;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;

      width: 202rpx;
      height: 34rpx;
      background: #262934;
      border-radius: 4rpx;
    }
    &_limited {
      width: 76rpx;
      height: 34rpx;
      color: $text-color4;
      background: $button;
      background-repeat: no-repeat;
      background-size: 100%;
      border-radius: 4rpx;
      text-align: center;
    }
    &_inStock {
      margin-left: 10rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;
    }
    &_CollectionCode {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: 0 30rpx;
      margin-top: 20rpx;
      position: relative;
      left: 16rpx;
      // width: 330rpx;
      height: 34rpx;
      color: $text-color4;
      background: $gradient1;
      background-repeat: no-repeat;
      background-size: 100%;
      border-radius: 18rpx;

      font-size: 24rpx;
      font-weight: 400;
      line-height: 34rpx;
      text-align: center;
    }
    &_CollectionIcon {
      position: absolute;
      top: -10rpx;
      left: -26rpx;
      width: 52rpx;
      height: 52rpx;
    }
    &_no {
      max-width: 300rpx;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.oliveBranch2 {
  position: absolute;
  top: 750rpx;
}
.oliveBranch3 {
  position: absolute;
  top: 800rpx;
}
.collectDetail {
  position: relative;
  z-index: 999;
  // margin: -30rpx 30rpx 0;
  margin: -30rpx 0 0;
  padding: 30rpx;
  // width: 690rpx;
  width: 750rpx;
  //   height: 538rpx;
  background: $bg-color3;
  border-radius: 24rpx;
  text-align: center;
  &_rowTitle {
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #bbbbbe;
    line-height: 34rpx;
  }
  &_rowTitle:not(:first-child) {
    margin-top: 30rpx;
  }
  &_rowDetail {
    margin-top: 10rpx;
    height: 50rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 50rpx;

    // width: 630rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &_row4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    padding: 0 30rpx;
    margin-top: 30rpx;
    height: 62rpx;
    color: $text-color4;
    background: $gradient1;
    // background-repeat: no-repeat;
    // background-size: 100%;
    border-radius: 28rpx;

    font-size: 24rpx;
    font-weight: 400;
    line-height: 62rpx;
  }
}
.collection_detail {
  background: #1c1d1d;
  // margin: 30rpx;
  border-radius: 24rpx;
  .collection_detail_text {
    margin: 30rpx;
    color: #ffffff;
    font-size: 16px;
    padding-top: 30rpx;
  }
  .uparse {
    color: $text-color1;
    margin: 30rpx 30rpx;
  }
  .Issuer {
    display: flex;
    justify-content: space-between;
    margin: 0 30rpx;
    color: #ffffff;
    padding-bottom: 20rpx;
  }
}
.collectDetail_video {
  margin-top: 200rpx;
}
.exchangeButton {
  width: 730rpx;
  height: 150rpx;
  position: fixed;
  z-index: 1000;
  left: 10rpx;
  right: 10rpx;
  bottom: 90rpx;
  background: $button3;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  font-size: 32rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 150rpx;
}
.bottom {
  position: fixed;
  z-index: 1001;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  // width: 690rpx;
  height: 110rpx;
  background: $bg-color3;
  &_item {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: center;

    height: 42rpx;
    &_icon {
      // margin-left: 68rpx;
      margin-left: 36rpx;
      width: 48rpx;
      height: 48rpx;
    }
    &_text {
      margin-left: 10rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 40rpx;
    }
  }
  &_item:not(:first-child) {
    border-left: 2rpx solid #262934;
  }
}
.showpopup {
  background-color: $bg-color3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  height: 350rpx;
  padding: 100rpx;
  font-size: 24rpx;
  color: #ffffff;
  .titlepopup {
    text-align: center;
  }
}
.canvas {
  width: 100%;
  height: 671px;
}
.canvasnew {
  z-index: -1;
  position: absolute;
}
.videocss {
  width: 750rpx !important;
}
.video {
  width: 750rpx;
  height: 750rpx;
}
</style>
